<template>
  <div>
      <el-dialog :visible.sync="dialogFormVisible" :before-close	="beforeClose">
        <div class="ysdx" slot="title" v-if="isShow">设置商品信息</div>
        <div class="ysdx" slot="title" v-else>批量设置商品信息</div>
      <el-form >
        <div v-if="addList.length ==1" style="display: flex;">
          <el-form-item label="商品名称：" style="width: 40%;">
            <span>{{goods.title}}</span>
          </el-form-item>
          <el-form-item label="售价："  style="width: 25%;">
            <span>{{goods.salesVolume}}</span>
          </el-form-item>
          <el-form-item label="成本价："  style="width: 25%;">
            <span>{{goods.salesVolume}}</span>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item>
            <span style="color: #f56c6c;">批量设置已选中的{{addList.length}}个商品</span>
          </el-form-item>

        </div>
        <el-form-item label="分佣比率：">
          <el-radio-group v-model="type">
            <el-radio :label="0" @change="cangggg">使用默认</el-radio>
            <el-radio :label="1">自定义设置<span style="color: #999999;">（二级分销奖励相加不得超过30%）</span></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分享奖励（%)">
         <div class="levelList">
           <p class="liveItem" v-for="(item,index) in levelList" :key="index">
             <!-- <span>{{item.levelName}}</span> -->
            <el-input class="inp" :disabled="type == 0" v-model="item.inviterRatio"  placeholder="0"></el-input>
           </p>
         </div>
        </el-form-item>
        <el-form-item label="邀请奖励（%)">
          <div class="levelList">
            <p class="liveItem" v-for="(item,index) in levelList" :key="index">
              <!-- <span>{{item.levelName}}</span> -->
                <el-input class="inp" :disabled="type == 0" v-model="item.inviterRatio"  placeholder="0"></el-input>
            </p>
          </div>
        </el-form-item>
        <el-form-item label="商家奖励（%)">
          <div class="levelList">
            <p class="liveItem" v-for="(item,index) in levelList" :key="index">
              <!-- <span>{{item.levelName}}</span> -->
              <el-input class="inp" :disabled="type == 0" v-model="item.inviterRatio"  placeholder="0"></el-input>
            </p>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="saveGood()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getShareSettings,saveShareSettings} from "@/api/setSharing"
  export default {
    name: 'payment',
    props:{
      isShow:Boolean,
      dialogFormVisible:false,
      addList:Array,
      levelList:Array
    },
    watch:{
      addList(newVal){
        if(newVal.length == 1){
          this.goods = newVal[0]
        }
      }
    },

    data(){
      return{
        goods:{},
        formLabelWidth:"140px",
        type:0,
        titel:''
      }
    },
    methods:{
       cangggg(){
      console.log(this.isShow)
    },
      closeDialog(){
        this.$emit('closeDialog')
      },
      beforeClose(){
        this.closeDialog()
      },
      saveGood(){
        if(this.addList.length ==1){
            this.saveShareGood()
        }else{
            this.saveShareGoodsBatch()
        }
      },
      saveShareGood(){
        this.levelList.forEach(item=>{
          if(item.id){
            delete item.id
          }
        })
        this.$emit('saveShareGood',{'refundType':this.type,"levelList":this.levelList})
      },
      saveShareGoodsBatch(){
        this.levelList.forEach(item=>{
          if(item.id){
            delete item.id
          }
        })
        this.$emit('saveShareGoodsBatch',{'refundType':this.type,"levelList":this.levelList})

      }
    }
  }
</script>

<style scoped lang="scss">
  .levelList{
    display: flex;
    .liveItem{
      display: flex;
      flex-direction: column;
      margin: 0;
      margin-left: 20px;
      .inp{
        width: 80px;
      }

    }
  }
::v-deep .el-dialog__body{
  padding: 0px 30px;
}
::v-deep .el-dialog{
  width: 40%;
  border-radius: 6px;
}
:v-deep .el-form-item{
  display: flex;
}
::v-deep .el-radio-group{
  margin-left: 20px;
}
::v-deep .el-dialog__header{
  padding: 20px 30px;
}
.ysdx{
  font-size: 18px;
  font-weight: 600;
}
::v-deep .el-input--medium{
  width: 50%;
  margin-left: 20px;
}
</style>
